
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>高度最大适应 - 数据表格</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">

  <!--jquery-->
  <script src="../../statics/libs/jquery.min.js"></script>
  <!--ztree-->
  <link rel="stylesheet" href="../../statics/plugins/ztree/css/zTreeStyle/zTreeStyle.css">
  <script src="../../statics/plugins/ztree/jquery.ztree.all.min.js"></script>

  <script src="../../js/common.js"></script>

</head>
<body>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>数据表格</cite></a>
      <a><cite>高度最大适应</cite></a>
    </div>
  </div>
  
  <div class="layui-fluid">
    <div class="layui-row layui-col-space10">
      <div class="layui-col-md2">

        <div class="layui-row">
          <div class="layui-col-md12">
            <a class="layui-icon layui-icon-edit" href="#" style="color: #01AAED" id="ed_dept">编辑部门</a>
          </div>
        </div>

        <hr>

        <div class="layui-row">
          <div class="layui-col-md12">
            <div style="overflow-y: auto;max-height: 250px">
              <ul id="dataTree" class="ztree"></ul>
            </div>
          </div>
        </div>

      </div>

      <div class="layui-col-md10">


        <div class="layui-row">
          <div class="layui-col-md12">
            <div class="layui-row layui-col-space5" style="background-color: #FFFFFF">
              <div class="layui-col-md2">
                <label id="labelName"></label>
                <input type="hidden" id="deptId">
              </div>
              <div class="layui-col-md4">
                <div class="layui-row">
                  <div class="layui-col-md4 layui-col-sm4">
                    <button id="addEmployee" class="layui-btn layui-btn-sm layui-icon layui-icon-add-1">添加成员</button>
                  </div>
                  <div class="layui-col-md5 layui-col-sm5">
                    <button id="bb" class="layui-btn layui-btn-sm">批量导入成员</button>
                  </div>
                  <div class="layui-col-md3 layui-col-sm3">
                    <button id="cc" class="layui-btn layui-btn-sm">更多...</button>
                  </div>
                </div>
              </div>
              <div class="layui-col-md3">
                <form class="layui-form" action="">
                  <div class="layui-form-item">
                    <select name="city" lay-verify="required">
                      <option value="0" selected>搜索成员姓名/手机/职位/工号</option>
                      <option value="1">成员籍贯</option>
                      <option value="2">成员名族</option>
                      <option value="3">成员家庭地址</option>
                      <option value="4">紧急联系人姓名/电话</option>
                    </select>
                  </div>
                </form>
              </div>
              <div class="layui-col-md2">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入查询条件" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-col-md1">
                <button id="queryData" class="layui-btn">查询</button>
              </div>
            </div>
          </div>
        </div>


        <div class="layui-row">
          <div class="layui-col-md12">
            <table class="layui-hide" id="test-table-height"></table>
          </div>
        </div>

      </div>
    </div>
  </div>
  
  <script src="../../layuiadmin/layui/layui.js"></script>
  <script>
  layui.config({
    base: '../../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table'], function(){
    var admin = layui.admin
    ,table = layui.table
    ,layer = layui.layer
    ,$ = layui.jquery;

    table.render({
      elem: '#test-table-height'
      ,url: layui.setter.base + 'json/table/user30.js'
      ,height: 'full-100'
      ,cellMinWidth: 80
      ,page: true
      ,limit: 30
      ,cols: [[
        {type:'checkbox'}
        ,{field:'id', title: 'ID', width:100, sort: true}
        ,{field:'username', title: '用户名', width:100}
        ,{field:'sex', title: '性别', width:100, sort: true}
        ,{field:'sign', title: '签名', minWidth: 150}
        ,{field:'experience', title: '积分', sort: true, align: 'right'}
        ,{field:'score', title: '评分', sort: true, minWidth: 100, align: 'right'}
      ]]
    });


      //部门树------------start
      var data_ztree;
      var data_setting = {
          data: {
              simpleData: {
                  enable: true,
                  idKey: "deptId",
                  pIdKey: "parentId",
                  rootPId: -1
              },
              key: {
                  url: "nourl"
              }
          },
          check: {
              enable: false,
              nocheckInherit: true,
              chkboxType: {"Y": "", "N": ""}
          },
          callback: {
              onClick: zTreeOnClick
          },
          view: {
              //showIcon: false
          }
      };

      function zTreeOnClick(event, treeId, treeNode) {
//          alert(treeNode.tId + ", " + treeNode.name);
//          alert("id:  "+treeNode.deptId  + "   name:   "+treeNode.name);
          console.log("id:  "+treeNode.deptId);
          console.log("name:   "+treeNode.name);
          $("#deptId").val(treeNode.deptId);
          $("#labelName").html(treeNode.name);
          table.reload('test-table-height',{
              where: {
                  deptId: treeNode.deptId
              }
          });


      };

      function getDataTree() {
          //加载菜单树
          Ajax.request({
              url: "../common/dept.js",
              async: true,
              successCallback: function (r) {
                  data_ztree = $.fn.zTree.init($("#dataTree"), data_setting, r.list);
                  //展开所有节点
                  data_ztree.expandAll(true);
              }
          });
      };

      getDataTree();


      //部门树------------end


      $('#queryData').on('click',function(){
          //配置一个透明的询问框
          layer.msg('查询按钮响应', {
              time: 20000, //20s后自动关闭
              btn: ['明白了', '知道了', '哦']
          });

          table.reload('test-table-height',{
              where: {
                  deptId: $("#deptId").val()
              }
          });
      });


      //编辑部门
      $('#ed_dept').on('click',function(){
          layer.open({
              type: 2,
              area: ['600px', '600px'],
              title: '修改部门',
              content: 'dept.html' //iframe的url，no代表不显示滚动条

              ,btn: ['保存', '取消']
              ,yes: function(index, layero){
                  var iframeWin = window[layero.find('iframe')[0]['name']];
                  var nodesArray = iframeWin.getDataTreeToArray();//调用子窗口方法
                  console.log(nodesArray);
                  //接下来可以写ajax把array形式树结构同步到后台数据库进行更新操作
                  //.......

                  //刷新当前页的树结构，并关闭ifram弹窗
                  var zTree = $.fn.zTree.getZTreeObj("dataTree");
                  zTree.refresh();
                  layer.close(index);
              }

              ,btn2: function(index, layero){
                  //do something
                  layer.close(index);
              }

          });
      });


      //添加成员
      $('#addEmployee').on('click',function(){
          layer.open({
              type: 2,
              area: ['600px', '600px'],
              title: '添加成员',
              content: 'addEmployee.html' //iframe的url，no代表不显示滚动条

              ,btn: ['保存', '取消']
              ,yes: function(index, layero){
                  var iframeWin = window[layero.find('iframe')[0]['name']];

              }

              ,btn2: function(index, layero){
                  //do something
                  layer.close(index);
              }

          });
      });
    
  });




  </script>
</body>
</html>